<script setup lang="ts">
import { PopupCard } from '~comp/card';
import SportCover from '~/assets/imgs/sport-game-cover.png';
import Expand from '~/layouts/default/Expand.vue';
import { normalizeGameInfo } from '~/pages/play/helpers';
import DetailSkeleton from './DetailSkeleton.vue';

const props = defineProps<{
  gameCode: string;
  orderNo: string;
}>();
const emits = defineEmits<{
  close: [];
}>();

const router = useRouter();
const appStore = useAppStore();
const logQry = useQuery({
  queryKey: [apis.apiGameLogDetail.id, () => props],
  queryFn: () => apis.apiGameLogDetail({ game_code: props.gameCode, order_no: props.orderNo }),
});
const gameInfo = computed(() => normalizeGameInfo(logQry.data.value?.game));
const log = computed(() => logQry.data.value);

function toPlay() {
  if (!gameInfo.value?.sport)
    return;

  if (gameInfo.value.sport)
    router.push({ name: RN.SPORTS, params: { gameCode: props.gameCode } });
  else
    router.push({ name: RN.PLAY, params: { gameCode: props.gameCode } });

  emits('close');
}
</script>

<template>
  <PopupCard
    class="box-border shadow-lg"
    :title="log?.game.name" @close="emits('close')"
  >
    <TSuspenseView v-bind="buildSvPropsOfQuery(logQry)" lass="h-full" outRender>
      <!--  -->
      <div v-if="log" class="grid grid-cols-[auto_1fr] mb-3 gap-x-3 gap-y-1 text-sm text-sys-text-body">
        <img
          class="col-span-1 row-span-4 block h-32 w-25 rounded-2 object-cover"
          :src="gameInfo?.sport ? SportCover : appStore.joinCdnPath(log.game.image_cover)"
        >
        <div class="truncate">
          {{ $t('p5g2zx8t25P2fVBs5mwtU') }}:&nbsp;{{ log.nickname }}
        </div>
        <div class="flex items-center">
          <div>{{ $t('vSWndcqBgbF9tlnzy6ZR') }}:</div>&nbsp;
          <div>{{ $d(log.create_time, 'full') }}</div>
        </div>
        <div class="flex items-center">
          <div>No:</div>&nbsp;
          <div class="flex items-center">
            <span>{{ desensitize(log.order_no, 6) }}</span>
            <TCopy class="ml-0 p-2 text-sys-text-body -m2" :source="log.order_no" :nthParent="1" />
          </div>
        </div>
        <AButton
          class="ant-cover__Button-3d-primary !mt-3 !h-10" block type="primary"
          @click="toPlay"
        >
          {{ $t('pCBbe17yvOp4Qi5npbQu') }}
        </AButton>
      </div>

      <!--  -->
      <div v-if="log" class="mb-3 flex gap-2 text-sm">
        <div class="flex flex-1 flex-col items-center justify-center rounded-2 bg-sys-layer-a px-1 py-3">
          <div class="mb-1 text-sys-text-body">
            {{ $t('kYpv7qo9HhQpo10X3pHCn') }}
          </div>
          <div class="text-sys-text-head">
            <TAmount :value="log.bet_amount" :symbol="log.currency.currency" iconPos="left" />
          </div>
        </div>
        <div class="flex flex-1 flex-col items-center justify-center rounded-2 bg-sys-layer-a px-1 py-3">
          <div class="mb-1 text-sys-text-body">
            {{ $t('gaNlzHcdnlP1pk6diOFjB') }}
          </div>
          <div class="text-sys-text-head">
            {{ log.odds }}
          </div>
        </div>
        <div class="flex flex-1 flex-col items-center justify-center rounded-2 bg-sys-layer-a px-1 py-3">
          <div class="mb-1 text-sys-text-body">
            {{ $t('g7DZIXsHtg66WrEyGl') }}
          </div>
          <div class="text-sys-text-head">
            <TAmount :value="log.reward_amount" :symbol="log.currency.currency" iconPos="left" />
          </div>
        </div>
      </div>

      <!--  -->
      <Expand class="rounded-2 bg-sys-layer-a">
        <template #trigger="{ toggle, expanded }">
          <div class="flex-between rounded-2 p3" @click="toggle">
            <span>{{ $t('lTqWwybd2gW3ExS57leO6') }}</span>
            <i class="i-ion:ios-arrow-down flex-none transition-all" :class="[expanded ? 'rotate-180' : '']" />
          </div>
        </template>

        <div class="more-details grid gap-3 p3 -mt-3">
          <div v-if="log?.transaction_id" class="item">
            <div class="header">
              Transaction ID
            </div>
            <div class="input">
              <span>{{ log?.transaction_id }}</span>
              <TCopy :source="log?.transaction_id" :nthParent="1" />
            </div>
          </div>
          <div v-if="log?.session_id" class="item">
            <div class="header">
              Session ID
            </div>
            <div class="input">
              <span>{{ log?.session_id }}</span>
              <TCopy :source="log?.session_id" :nthParent="1" />
            </div>
          </div>
          <div v-if="log?.game.provider_game_id" class="item">
            <div class="header">
              Game ID
            </div>
            <div class="input">
              <span>{{ log?.game.provider_game_id }}</span>
              <TCopy :source="log?.game.provider_game_id" :nthParent="1" />
            </div>
          </div>
          <div v-if="log?.round_id" class="item">
            <div class="header">
              Round ID
            </div>
            <div class="input">
              <span>{{ log?.round_id }}</span>
              <TCopy :source="log?.round_id" :nthParent="1" />
            </div>
          </div>
        </div>
      </Expand>

      <template #pending>
        <DetailSkeleton class="pt-10" />
      </template>
    </TSuspenseView>
  </PopupCard>
</template>

<style lang="scss" scoped>
.more-details-wrapper {
  --van-collapse-item-content-background: theme('colors.sys.layer.a');
  --van-cell-background: theme('colors.sys.layer.a');
  --van-cell-active-color: theme('colors.sys.layer.a');
  --van-cell-vertical-padding: 12px;
  --van-collapse-item-content-padding: 16px;
  --van-cell-border-color: transparent;
  --van-border-color: transparent;

  flex: none;
  overflow: hidden;
  border-radius: 8px;
}

.more-details .item {
  .header {
    --uno: 'mb-1';
  }

  .input {
    --uno: 'flex items-center justify-between bg-sys-layer-d p3 rounded-2 text-sys-text-head';
  }
}
</style>
